<script setup>
import { getHomeDataStatisticAsync } from '@/api/dataManagement.js'
import * as echarts from 'echarts';
import { watch } from 'vue';

const statisticData = ref({
  myProInstIngCount: 0,
  myProInstFinishCount: 0
})
const getStatisticData = async () => {
  try {
    const res = await getHomeDataStatisticAsync()
    if (res.code + '' === '200' && res.data) {
      statisticData.value = res.data
      console.log('%c [ statisticData.value ]-15', 'font-size:13px; background:pink; color:#bf2c9f;', statisticData.value)

    }
  } catch (error) {
    console.log('%c [ error ]-9', 'font-size:13px; background:pink; color:#bf2c9f;', error)
  }
}

// <!-- 
// myProInstCount 我的流程实例数量
// myProInstIngCount  我的进行中(在审批中)的流程数量
// myProInstFinishCount  我的已经完成的流程数量
// proDefCount 流程定义数量
// myFinishApproveCount 我已审批的数量
// myIngApproveCount 待我审批的数量
// myToDoTaskCount 待我领取的任务
//  -->
const myProInstCount = computed(() => statisticData.value.myProInstCount || 0)
const myProInstIngCount = computed(() => statisticData.value.myProInstIngCount || 0)
const myProInstFinishCount = computed(() => statisticData.value.myProInstFinishCount || 0)
const proDefCount = computed(() => statisticData.value.proDefCount || 0)
const myFinishApproveCount = computed(() => statisticData.value.myFinishApproveCount || 0)
const myIngApproveCount = computed(() => statisticData.value.myIngApproveCount || 0)
const myToDoTaskCount = computed(() => statisticData.value.myToDoTaskCount || 0)

const headerList = computed(() => {
  return [
    {
      label: '我的流程实例数量',
      value: myProInstCount.value,
      icon: 'CopyDocument',
      color: '#92cbcb'
    },
    {
      label: '我的进行中(在审批中)的流程数量',
      value: myProInstIngCount.value,
      icon: 'RemoveFilled',
      color: '#99c334'
    },
    {
      label: '我的已经完成的流程数量',
      value: myProInstFinishCount.value,
      icon: 'SuccessFilled',
      color: '#a66ec3'
    },
  ]
})

const bodyDataList = computed(() => {
  return [
    {
      label: '流程定义数量',
      value: proDefCount.value,
    },
    {
      label: '我已审批的数量',
      value: myFinishApproveCount.value,
    },
    {
      label: '待我审批的数量',
      value: myIngApproveCount.value,
    },
    {
      label: '待我领取的任务',
      value: myToDoTaskCount.value,
    },

  ]
})

//柱状图
const barCharts = ref(null)
const initBarCharts = () => {

  const charts = echarts.init(barCharts.value, 'dark')
  const option = {
    legend: {
      show: true,
      orient: 'vertical',
      right: 10,
      top: 'center'
    },
    tooltip: {
      trigger: 'axis',
    },
    xAxis: {
      data: bodyDataList.value.map(item => item.label)
    },
    yAxis: {},
    series: [
      {
        type: 'bar',
        name: '柱状图',
        data: bodyDataList.value.map(item => item.value),
        label: {
          show: true,
          position: 'top'
        },
        itemStyle: {
          barBorderRadius: 5,
          borderWidth: 1,
          borderType: 'solid',
          borderColor: '#73c0de',
          shadowColor: '#5470c6',
          shadowBlur: 3
        }

      },
      {
        type: 'line',
        name: '折线图',
        smooth: true,
        data: bodyDataList.value.map(item => item.value),

      }

    ],
  };
  charts.setOption(option)
  window.onresize = function () {
    charts.resize()
  }
}

//饼图
const pieCharts = ref(null)
const initPieCharts = () => {
  const charts = echarts.init(pieCharts.value, 'dark')
  const option = {

    // title: {
    //   text: '系统相关数据展示',
    //   left: 'center'
    // },
    tooltip: {},
    legend: {
      show: true,
      // orient: '',
      // btoom: 10,
      top: 'bottom'
    },
    emphasis: {
      label: {
        show: false,
        fontSize: '20',
        fontWeight: 'bold'
      }
    },
    series: [
      {
        type: 'pie',
        radius: [20, 120],
        center: ['50%', '50%'],

        data: bodyDataList.value.map(item => {
          return {
            name: item.label,
            value: item.value
          }
        }),
        itemStyle: {
          borderRadius: 40,
          borderWidth: 2,
          borderType: 'solid',
          borderColor: '#73c0de',
          shadowColor: '#5470c6',
          shadowBlur: 10
        },
        startAngle: 180,
        endAngle: 360,
        roseType: 'area'
      },


    ],
  };
  charts.setOption(option)
  window.onresize = function () {
    charts.resize()
  }
}

const initCharts = () => {
  initBarCharts()
  initPieCharts()
}

onMounted(() => {
  getStatisticData()
})

watch(() => statisticData.value, () => {
  initCharts()
})

</script>



<template>
  <div class="statistic-container">
    <div class="header">
      <h1 class="header-tips">需要相应权限，请联系管理人员！</h1>
      <div class="charts">
        <el-card v-for="(item, index) in headerList" :key="item.label" shadow="hover">
          <div class="icon" :style="{ 'background-color': item.color }">
            <el-icon>
              <component :is="item.icon"></component>
            </el-icon>
          </div>
          <div class="text">
            <span class="data">{{ item.value }}</span>
            <span class="tips">{{ item.label }}</span>
          </div>
        </el-card>
      </div>
    </div>
    <div class="title">
      <el-card>
        <p>与我相关的数据</p>
      </el-card>
    </div>
    <div class="charts-area">
      <el-card shadow="hover">
        <div class="bar-charts" ref="barCharts"></div>
      </el-card>
      <el-card shadow="hover">
        <div class="bar-charts" ref="pieCharts"></div>
      </el-card>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.statistic-container {
  width: 100%;
  overflow: scroll;

  .header {
    display: flex;

    width: 100%;
    flex-direction: column;

    .header-tips {
      font-size: 24px;
      font-weight: 700;
      font-style: italic;
      color: #afafaf;
      text-align: center;
      margin-bottom: 10px;
      text-shadow: 2px 2px 2px #686868;
    }

    .charts {
      display: flex;
      gap: 10px;
      width: 100%;
    }

    :deep(.el-card) {
      width: 33%;
      border-radius: 0% 0% 20% 20%;
    }

    :deep(.el-card__body) {
      display: flex;
      justify-content: space-around;
    }

    .icon {
      height: 80px;
      width: 80px;
      background-color: rgb(10, 114, 114);
      position: relative;
      border-radius: 50% 0;
      margin-right: 10px;

      :deep(.el-icon) {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 40px;
        color: #fff;
      }
    }

    .text {
      display: flex;
      flex-direction: column;

      .data {
        font-size: 40px;
        font-weight: 700;
        color: #7d7d7d;
        text-align: center;
      }

      .tips {
        font-size: 18px;
        font-weight: 700;
        color: #a7a7a7
      }
    }


  }


  .title {
    margin-top: 20px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 28px;
    font-weight: 700;

    :deep(.el-card) {
      height: 100%;
      padding: 0;
      border-radius: 0% 0 25% 25%;
    }

    :deep(.el-card__body) {
      height: 100%;
      padding: 0;
      color: #7d7d7d;
      letter-spacing: 5px;
    }
  }

  .charts-area {
    width: 100%;
    height: auto;
    display: flex;
    margin-top: 20px;
    gap: 20px;

    :deep(.el-card) {
      flex: 1;
    }

    .bar-charts {
      width: 100%;
      height: 300px;
    }
  }
}
</style>